<template>
  <div>
    <el-dialog  v-dialogDrag  
      title="人员变动情况"
      :visible.sync="personChangeVisible"
      width="70%"
      top="40vh"
    >
      <el-table
        ref="personChangeTable"
        v-loading="personChangeListLoading"
        :data="personChangeList"
        :stripe="true"
        fit
        max-height="420"
        style="width: 100%;"
        :header-cell-style="{background:'#eef1f6',color:'#606266'}"
      >
        <template slot="empty">
          <tableEmpty />
        </template>
        <el-table-column
          label="序号"
          type="index"
          align="center"
          width="50"
        />
        <el-table-column
          label="姓名"
          align="center"
          prop="personName"
          width="100"
        >
          <template slot-scope="{row}">
            <el-link
              type="primary"
              @click="viewInfo(row)"
            >
              <span>{{ row.personName }}</span>
            </el-link>
          </template>
        </el-table-column>
        <el-table-column
          label="身份证号码"
          align="center"
          prop="idenNo"
          white-space="nowrap"
        > 
          <template slot-scope="{row}">
            <span>{{ row.idenNo }}</span>
          </template>
          </el-table-column>
        <el-table-column
          label="人员类别"
          align="center"
          width="100"
        >
          <template slot-scope="{row}">
            <span>{{ row.state | stateFilter(that) }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="变动类型"
          align="center"
          width="100"
        >
          <template slot-scope="{row}">
            <span>{{ row.operateCode | operateCodeFilter(that) }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="去向单位"
          align="center"
        >
          <template slot-scope="{row}">
            <span>{{ row.outToAgency | agencyFilter(that) }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="来源单位"
          align="center"
        >
          <template slot-scope="{row}">
            <span>{{ row.inFromAgency | agencyFilter(that) }}</span>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        :total="personChangeTotal"
        :page.sync="personChangeQuery.page"
        :limit.sync="personChangeQuery.limit"
        @pagination="getPersonChangeList"
      />
    </el-dialog>
    <PersonSalaryInfo ref="personSalaryInfo" />
  </div>
</template>

<script>
import {
  getPersonChangeList
} from '@/api/personInfoMaintenance/personChangeAudit'
import { getAllAgency } from '@/api/unitInformationMaintenance/unitInformationEdit'
import PersonSalaryInfo from '@/components/personSalaryInfo/personSalaryInfo'
import Pagination from '@/components/Pagination' // secondary package based on el-pagination
import tableEmpty from '@/components/table/empty'
export default {
  name: 'PersonChangeInfo',
  components: { Pagination, tableEmpty, PersonSalaryInfo },
  filters: {
    operateCodeFilter(type, that) {
      if (type === 'add') {
        return '新增'
      } else if (type === 'edit') {
        return '修改'
      } else if (type === 'out') {
        return '调出'
      } else if (type === 'in') {
        return '调入'
      } else if (type === 'delete') {
        return '消减'
      }
    },
    stateFilter(type, that) {
      if (type === '1') {
        return '离退休'
      } else if (type === '3') {
        return '在职'
      }
    },
    agencyFilter(type, that) {
      if (type === '') {
        return ''
      }
      const agencyList = that.agencyList
      for (const item in agencyList) {
        if (agencyList[item].id === type) {
          return agencyList[item].agencyName
        }
      }
    },
    //号码脱敏显示
    hideMiddle(val) {
      if(val!== undefined&& val!== null){//避免列表中存在空数据报错
        return `${val.substring(0,4)}****${val.substring(val.length-4)}`
      }else{
        return val
      }
    }
  },
  data() {
    return {
      that: this,
      personChangeList: [], // 人员变动表格数据
      personChangeTotal: 0,
      personChangeVisible: false, // 人员变动弹框
      personChangeListLoading: false, // 人员变动表格加载
      personChangeQuery: {
        page: 0,
        limit: 200,
        agencyId: ''
      },
      agencyList: [] // 单位数组
    }
  },
  methods: {
    // 获取人员变动数据
    getPersonChange(agencyId) {
      this.personChangeQuery.agencyId = agencyId
      this.personChangeVisible = true
      this.getAllAgency()
      this.getPersonChangeList()
    },
    getPersonChangeList() {
      this.personChangeListLoading = true
      getPersonChangeList(this.personChangeQuery).then(response => {
        this.personChangeList = response.data.rows
        this.personChangeTotal = response.data.total
        this.personChangeListLoading = false
      })
    },
    // 查看详情
    viewInfo(currenRow) {
     // console.info(currenRow)
      this.$refs.personSalaryInfo.viewInfo(currenRow.personId, undefined, this.personChangeQuery.agencyId)
    },
    getAllAgency() {
      getAllAgency().then(response => {
        this.agencyList = Object.assign({}, response.data)
      })
    }
  }
}
</script>

